<template>
	<view class="body">
		<view class="top">
			<!-- <image class="topBg" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian1.png"
				mode=""></image> -->
			<u-navbar title="佣金提现" bgColor="#2393FF" leftIconColor="#FFFFFF" :titleStyle="{color:'#FFFFFF'}"
				:autoBack="true">
			</u-navbar>
			<view class="topData flex-between">
				<view class="left">
					<view class="title">当前佣金(元）</view>
					<view class="price"> <text class="pIcon">￥</text> {{commissionCount || 0}}</view>
				</view>
				<button class="right" @click="goDetail">提现明细</button>
			</view>
		</view>

		<view class="content">
			<view class="titleBox flex-between">
				<view class="title flex">
					<view class="lineText"></view>佣金提现
				</view>
				<view class="" @click="goRest">余额管理</view>
			</view>
			<view class="center">
				<view class="flex">
					<view class="flex left">
						<text>￥</text>
						<input type="number" v-model="withdrawalMoney" />
					</view>
					<button class="right" @click="withdrawalMoney = commissionCount">全部提现</button>
				</view>

				<view class="tip flex-between">
					<view class="">当前可提现佣金：{{commissionCount || 0}}</view>
					<view class="">手续费：{{withdrawalCommission}}%</view>
				</view>

				<view class="data">
					<view class="pb22">提现佣金： {{withdrawalMoney}}</view>
					<view class="pb22">提现手续费：{{service}}元</view>
					<view class="pb22">实际到账： {{actualReceipt}}元</view>
					<view class="pb22 flex">提现方式：<image
							src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian4.png"
							mode=""></image> 微信零钱</view>
				</view>
				<view class="agreement flex">
					<image :src="isAgree?'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian3.png':'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian2.png'"
						mode="" @click="isAgree = !isAgree"></image>
					我已知晓并同意<navigator url="" class="title">《平台提现协议》</navigator>
				</view>
				<button class="btn" @click="postProcessAdd">立即提现</button>
			</view>
		</view>

		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import {
		getCommissionInfo,
		getInfo,
		processAdd,
		getRecordApi,
	} from '@/api/user.js';
	import {
		getWithdrawalList,
		getDistributionConfig
	} from '@/api/xing.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage,
			home
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					'-1': '未通过',
					'0': '审核中',
					'1': '已提现'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				name: '提现总额',
				type: 0,
				page: 1,
				limit: 10,
				recordList: [],
				recordType: 4,
				statuss: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				extractCount: 0,
				commissionCount: 0, //当前佣金
				withdrawalCommission: "", //手续费比例
				withdrawalMoney: "", //提现佣金
				uid: '',
				isAgree:false,//是否同意协议
			};
		},
		computed: {
			// 提现手续费
			service() {
				let price = this.withdrawalMoney ? (Number(this.withdrawalMoney) * Number(this.withdrawalCommission)) /
					100 : 0
				return price.toFixed(2)
			},
			//实际到账
			actualReceipt() {
				let price = this.withdrawalMoney - this.service
				return price.toFixed(2)
			},
		},
		onLoad(options) {
			this.getPrice()
			this.getDistribution()
			this.uid = JSON.parse(uni.getStorageSync('USER_INFO')).userInfo.uid
		},
		onShow: function() {


		},
		methods: {
			onLoadFun() {
				this.getRecordList();
			},
			// 获取当前佣金
			getPrice() {
				getInfo().then(res => {
					this.commissionCount = res.data.commission
				})
			},
			// 获取提现手续费
			getDistribution() {
				getDistributionConfig().then(res => {
					this.withdrawalCommission = res.data.records[0].withdrawalCommission
				})
			},
			// 提现
			postProcessAdd() {
				// 校验提现金额是否为空
				if (!this.withdrawalMoney) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if(!this.isAgree){
					uni.showToast({
						title: '请勾选协议~',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				processAdd({
					uid: this.uid,
					withdrawalMoney: this.withdrawalMoney
				}).then(res => {
					// 处理成功回调
					uni.showToast({
						title: '提现申请已提交，请等待处理',
						icon: 'none',
						duration: 2000
					});
					this.getPrice()
					this.withdrawalMoney = ''
					this.service = null
					this.actualReceipt = null
				})
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			getList: function() {
				let that = this;
				let recordList = that.recordList;
				let recordListNew = [];
				if (that.statuss == true) return;
				getRecordApi({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let len = res.data.list ? res.data.list.length : 0;
					let recordListData = res.data.list || [];
					recordListNew = recordList.concat(recordListData);
					that.statuss = that.limit > len;
					that.page = that.page + 1;
					that.$set(that, 'recordList', recordListNew);
				});
			},
			getRecordList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				let statuss = that.statuss;
				let recordType = that.recordType;
				let recordList = that.recordList;
				let recordListNew = [];
				if (statuss == true) return;
				getCommissionInfo({
					page: page,
					limit: limit
				}).then(res => {
					if (res.data.list) {
						let len = res.data.list ? res.data.list.length : 0;
						let recordListData = res.data.list || [];
						recordListNew = recordList.concat(recordListData);
						that.statuss = limit > len;
						that.page = page + 1;
						that.$set(that, 'recordList', recordListNew);
					}
				});
			},
			goBack() {
				uni.navigateBack()
			},
			// 跳转到佣金明细
			goDetail() {
				uni.navigateTo({
					url: "/pages/users/user_spread_money/index"
				})
			},
			// 跳转到余额管理
			goRest() {
				uni.navigateTo({
					url: "/pages/users/user_money/index"
				})
			},
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	.headerCon {
		background-image: url('http://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/commissionBackground.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 221rpx;
	}

	.commission-details .promoterHeader .headerCon .money {
		font-size: 36rpx;
	}

	.commission-details .promoterHeader .headerCon .money .num {
		font-family: 'Guildford Pro';
	}

	.body {
		position: relative;
	}

	.top {
		width: 100%;
		height: 428rpx;
		background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.topData {
		padding: 248rpx 56rpx 46rpx;

		.left {
			color: #FFFFFF;

			.title {
				font-size: 24rpx;
			}

			.price {
				margin-top: 14rpx;
				font-family: 'DIN';
				font-weight: bold;
				font-size: 72rpx;
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);

				.pIcon {
					font-size: 32rpx;
				}
			}
		}

		.right {
			width: 166rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0px 6px 12px 2px rgba(204, 204, 204, 0.16);
			border-radius: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-size: 24rpx;
			color: #2393FF;
		}
	}

	.content {
		margin: 24rpx 32rpx;

		.titleBox {
			width: 100%;
			height: 80rpx;
			background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/%E8%92%99%E7%89%88%E7%BB%84%20104.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			font-weight: 500;
			font-size: 24rpx;
			color: #637697;
			padding: 0 24rpx;

			.title {
				font-weight: 700;
				font-size: 32rpx;
				color: #28314C;
				font-family: "Alibaba PuHuiTi 2.0-85 Bold"
			}

			.lineText {
				width: 8rpx;
				height: 34rpx;
				background: #2393FF;
				border-radius: 4px 4px 4px 4px;
				margin-right: 12rpx;
			}
		}

		.center {
			background: #FFFFFF;
			border-radius: 0 0 8rpx 8rpx;
			padding: 24rpx 24rpx 40rpx;

			.left {
				flex: 1;
				background-color: rgba(204, 204, 204, 0.16);
				height: 88rpx;
				line-height: 88rpx;
				padding: 0 24rpx;
				border-radius: 14rpx;

				text {}

				input {
					font-family: 'DIN';
					font-weight: bold;
					font-size: 48rpx;
					color: #28314C;
				}
			}

			.right {
				width: 154rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #2393FF;
				border-radius: 14rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.tip {
				font-weight: 500;
				font-size: 24rpx;
				color: #637697;
				padding: 18rpx 0 32rpx;
			}

			.data {
				background: #D7EEFF;
				border-radius: 14rpx;
				padding: 22rpx 24rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #28314C;
			}

			.agreement {
				font-weight: 500;
				font-size: 24rpx;
				color: #D2D2D2;
				padding: 40rpx 0;

				image {
					width: 31rpx;
					height: 31rpx;
					margin-right: 10rpx;
				}

				.title {
					font-weight: 500;
					font-size: 24rpx;
					color: #2393FF;
				}
			}

			.btn {
				width: 638rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				background: #0077FF;
				border-radius: 14rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.pb22 {
		padding-bottom: 12rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 10rpx 0 20rpx;
		}

	}
</style>